import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
//import Router from './router/index'
import "antd/dist/antd.css";
import Shou from "./shou/index";
import { Provider } from "react-redux";
import { store } from "./store/redux";
import { hot } from "react-hot-loader/root";
import TextChild from "./children";
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    console.log(error, errorInfo);
    // logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}
class Tex extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 1,
    };
  }
  componentDidMount() {
    this.setState({
      num: this.state.num + 1,
    });
    this.setState({
      num: this.state.num + 1,
    });
    setTimeout(() => {
      this.setState({
        num: this.state.num + 1,
      });
      this.setState({
        num: this.state.num + 200,
      }); // 离开了类的同步 就是脱离链表 所以不会合并 批处理
    }, 1000);
  }
  add = () => {
    //函数的setState返回对象的参数或者异步操作后不会合并
    // 对象的setState 参数会合并 批处理最后一次 推荐用函数
    this.setState({
      num: this.state.num + 1,
    });
    this.setState({
      num: this.state.num + 1,
    });
    setTimeout(() => {
      this.setState({
        num: this.state.num + 1,
      });
    }, 1000);
    this.setState((state, props) => {
      return {
        num: state.num + 1 + props.number,
      };
    });
    this.setState((state, props) => {
      return {
        num: state.num + 1,
      };
    });
  };
  render() {
    // throw new Error('出错了！'); 抛出错误 会执行错误边界组件
    return <div onClick={this.add}>tex{this.state.num}</div>;
  }
}
const App = function () {
  let [val, setVal] = useState(0);
  let [pc, setPc] = useState(true);
  let [arr, setarr] = useState([1, 2, 34]);
  let [num, setnum] = useState(10);
  let arr1 = [];
  for (let index = 0; index < num; index++) {
    arr1[index] = index;
  }
  let but = function () {
    let index = val + 13111;
    setVal(index);
  };
  let chane = function () {
    setPc(!pc);
  };
  // useEffect(() => {
  //   console.log(1213)
  //   let index = val + 10
  //   setVal(index)
  // })
  return (
    <div>
      <TextChild header={<div>父级过来的div</div>} userID={'12111'} footer={<div>父级过来的底部div</div>}>
        {v=>{return <div>{v.msg}</div>}}
      </TextChild>
      <ErrorBoundary>
        <Tex number={11} />
      </ErrorBoundary>
      {arr1.map((res) => {
        return <span key={"a" + res}>{res}</span>;
      })}
      {arr.length > 0 ? (
        arr.map((res) => {
          return (
            <div key={res} style={{ color: "red" }}>
              {res}
            </div>
          );
        })
      ) : (
        <div>123</div>
      )}
      <button onClick={but}>按钮121</button>
      <button onClick={chane}>{pc ? "首页1" : "管理"}</button>
      <Provider store={store}>
        <Shou pc={pc} />,
      </Provider>
      ,
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("app"));
if (module.hot) {
  module.hot.accept(App, () => {
    ReactDOM.render(<App />, document.getElementById("app"));
  });
}
/**
 * Detected AppContainer unmount on module './src/index.js' update.
Did you use "hot(App)" and "ReactDOM.render()" in the same file?
"hot(App)" shall only be used as export.
Please refer to "Getting Started"
检测到AppContainer在模块'./src/index.js'上卸载。
你在同一个文件中使用了“hot(App)”和“ReactDOM.render()”吗?
“hot(App)”只能用于出口。
 */
